<script lang="ts" setup>
import EmptyComp from '@/components/EmptyComp.vue';
import ListItem from '@/components/ListItem.vue';
import { onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';
import { useFansListInfoStore } from '@/stores/fansList';
import { useFocusListInfoStore } from '@/stores/focusList';
import { RequestAxios } from '@/utils/axios';
  const active = ref(0)
  const fansStore = useFansListInfoStore()
  const focusStore = useFocusListInfoStore()

  onMounted(() => {
      const route = useRoute()
      const params = route.query.type as string

      if(params === 'fans') {
        active.value = 1
      } else {
        active.value = 0
      }
    }
  )

  const changeFansBtn = (index: number) => {
    if(fansStore.switchFansList[index]) {
      fansStore.fansTextList[index] = '互相关注'
      fansStore.switchFansList[index] = false
    } else {
      fansStore.fansTextList[index] = '关注'
      fansStore.switchFansList[index] = true
    }
  }

  const changFocusBtn = (index: number) => {
    focusStore.switchFocusList[index] = false
    if(focusStore.focusTextList[index] === '互相关注') {
      focusStore.focusTextList[index] = '取消关注'
      RequestAxios<IRes>({
        url: 'v1_0/user/followings',
        method: 'post',
        data: {
          target: focusStore.focusList[index].id
        }
      })
    } else {
      focusStore.focusTextList[index] = '互相关注'
      RequestAxios<IRes>({
        url: `v1_0/user/followings/${focusStore.focusList[index].id}`,
        method: 'delete'
      })
    }
  }
</script>

<template>
  <div>
    <van-tabs
    v-model:active="active"
    color="#EE0A24"
    :line-width="56"
    :line-height="3"
    shrink
    >
      <van-tab title="我的关注">
        <EmptyComp v-if="focusStore.focusList.length === 0" />
        <div v-else>
          <ListItem
            @click="changFocusBtn(index)"
            :text="focusStore.focusTextList[index]"
            :is-switch="focusStore.switchFocusList[index]"
            :item ="item"
            v-for="(item, index) in focusStore.focusList"
            :key="item.id"
          />
        </div>
      </van-tab>
      <van-tab title="我的粉丝">
        <EmptyComp v-if="fansStore.fansList.length === 0" />
        <div v-else>
          <ListItem
            @click="changeFansBtn(index)"
            :text="fansStore.fansTextList[index]"
            :is-switch="fansStore.switchFansList[index]"
            :item="item"
            v-for="(item, index) in fansStore.fansList"
            :key="item.id"
          />
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<style scoped>

</style>